<template>
  <el-menu
    class="navbar"
    :default-active="activeIndex"
    @select="selected"
    background-color="#2f266b"
    text-color="#fff"
    active-text-color="#ffd04b"
    router
  >
    <el-menu-item
      index="/"
      class="menutext"
    >发现</el-menu-item>
    <el-menu-item
      index="/MyU"
      class="menutext"
    >本校</el-menu-item>
    <el-menu-item
      index="/MyClub"
      class="menutext"
    >我的社团</el-menu-item>
    <el-menu-item
      index="/Self"
      class="menutext"
    >个人中心</el-menu-item>
    <el-menu-item
      index="/publish"
      class="menutext"
    >发布</el-menu-item>
    <el-menu-item
      index="/ceshi"
      class="menutext"
    >测试</el-menu-item>
  </el-menu>
</template>

<script>
import { useRouter } from 'vue-router';

export default {
  name: 'NavBar',
  data() {
    return {
      activeIndex: this.$route.path // 默认使用路由路径来初始化 activeIndex
    };
  },
  watch: {
    // 路由变化时更新 activeIndex
    '$route'(to, from) {
      this.activeIndex = to.path;
    }
  },
  methods: {
    selected(index) {
      console.log(index);
    }
  }
};
</script>

<style scoped>
.navbar {
  position: fixed;
  top: 60px; /* 固定在 TopBar 下方 */
  left: 0;
  width: 200px; /* 导航栏宽度 */
  height: calc(100vh - 60px); /* 使导航栏高度从 TopBar 底部延伸到页面底部 */
  overflow-y: auto; /* 使 NavBar 可以滚动 */
  background-color: #1d3269;
  z-index: 9;
  margin: 0; /* 确保没有外边距 */
  padding: 0; /* 确保没有内边距 */

}
.el-menu-item {
  font-size:20px;
}
.el-menu-item.is-active {
  background-color: #f9c32f; /* 激活时背景颜色 */
  color: #d60630; /* 激活时文字颜色 */
}
/* .menutext{
  display: flex; 
  justify-content: center; 
  align-items: center;   
  height: 60px; 
  font-size: 20px;
} */
</style>
